<template>
    <div>
        <!-- 三级分类全局组件 -->
        <category :scene="scene"></category>
        <!-- spu数据展示 -->
        <el-card v-show="scene==0" shadow="always" :body-style="{ padding: '20px' }" style="margin:10px 0;">
            <!-- 添加SPU按钮 -->
            <el-button type="primary" size="default" :icon="Plus" @click="addSpu" :disabled="!categoryStore.C3Id">添加SPU</el-button>
            <el-table border stripe style="margin:10px 0;" :data="spuList.records" v-loading="loading">
                <el-table-column label="序号" width="80" align="center" type="index"></el-table-column>
                <el-table-column label="SPU名称" prop="spuName"></el-table-column>
                <el-table-column label="SPU描述" prop="description"></el-table-column>
                <el-table-column label="操作">
                    <template v-slot="{row,$index}">
                        <el-button type="primary" size="small" :icon="Plus" title="添加SKU" @click="addSku(row)"></el-button>
                        <el-button type="warning" size="small" :icon="Edit" title="修改SPU" @click="updateSpu(row)">
                        </el-button>
                        <el-button type="info" size="small" :icon="InfoFilled" title="查看SKU" @click=""></el-button>
                        <el-button type="danger" size="small" :icon="Delete" title="删除SPU" @click=""></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination @current-change="getSpuList" @size-change="getSpuList"
                v-model:current-page.sync="currentPage" :page-sizes="[1,3,5,7]" v-model:page-size="pageSize"
                layout=" prev, pager, next, jumper,->,sizes,total" :total="spuList.total" background :pager-count="7">
            </el-pagination>

        </el-card>

        <Spu v-show="scene==1" @changeShow="changeHandler" ref="spuRef"></Spu>
        <Sku v-show="scene==2" @changeShow="changeHandler" ref="skuRef"></Sku>

    </div>
</template>

<script setup lang="ts">
import Spu from './addOrUpdateSpu.vue';
import Sku from './addSku.vue'
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
    Plus,
    InfoFilled
} from '@element-plus/icons-vue'
import { reqSpuList } from '@/api/product/spu/spu'
import { ref, watch } from 'vue';
// 引入仓库
import useCategoryStore from '@/stores/category'
let categoryStore = useCategoryStore()
// 加载动画效果
let loading = ref<boolean>(false)
// 切换场景
let scene = ref<number>(0)
// 存储当前第几页
let currentPage = ref<number>(1)
// 存储一页显示几条数据
let pageSize = ref<number>(3)
// 存储spu数据
let spuList = ref({})
// 获取子组件spu的实例
let spuRef = ref()
// 获取子组件sku的实例
let skuRef = ref()
// 存储sku列表
let skuList = ref()
watch(
    () => categoryStore.C3Id,
    () => {
        if (categoryStore.C3Id == '') return
        getSpuList()
    }
)
// 发请求获取SPU数据
const getSpuList = async () => {
    loading.value = true
    let result = await reqSpuList(currentPage.value, pageSize.value, categoryStore.C3Id)
    console.log(result);
    spuList.value = result
    loading.value = false
}

// 点击添加SPU按钮
const addSpu = () => {
    scene.value = 1
    spuRef.value.initAddSpu(categoryStore.C3Id)
}
// 点击修改SPU按钮
const updateSpu = (row) => {
    scene.value = 1
    spuRef.value.getAllInfo(row)
}

// 子组件自定义事件的回调
const changeHandler = ({scenes, flag}) => {
    scene.value = scenes
    //当前是添加
    if (flag == "add") {
        //再次获取最新全部SPU的数据
        getSpuList();
    } else if (flag == "update") {
        //再次获取最新全部SPU的数据
        getSpuList(currentPage.value);
    }
}

// 添加SKU
const addSku = (row) => {
    scene.value = 2
    skuRef.value.initSku(categoryStore.C1Id, categoryStore.C2Id, row)
}
</script>

<style scoped>

</style>